<template>
  <view class="box">
    <view>
      当前
      <view>{{ isLogin ? "已登录" : "未登录" }}</view>
      <view>{{ isFirstUse ? "第一次使用" : "非第一次使用" }}</view>
    </view>

    <view>引导页</view>
    <view>引导页</view>
    <view>引导页</view>
    <view>引导页</view>

    <u-modal
      :show="showConfirm"
      title="1111"
      confirm-text="同意并进入"
      cancel-text="不同意并退出"
      showCancelButton
      @cancel="onCancel"
      @confirm="onConfirm"
    >
      <u-button type="primary" @click="openProtocol"
        >打开{{ protocolTitle }}</u-button
      >
      <u-button type="error" @click="onCancel">退出小程序</u-button>
    </u-modal>

    <base-protocol
      ref="protocol"
      v-model:show="showProtocol"
      :type="protocolType"
      hideToggle
    />
  </view>
</template>
<script lang="ts" setup>
import { useUserStore, useAppStore } from "@/store";
import { computed, ref, watch } from "vue";
import { exitMiniProgram } from "@/utils";
import baseProtocol from "@/components/protocol/base.vue";
import { ProtocolTypeEnum } from "@/utils";

const userStore = useUserStore();

const appStore = useAppStore();

/** 展示协议 */
const showProtocol = ref(false);

const protocolType = ProtocolTypeEnum.PRIVACY;

const protocol = ref<typeof baseProtocol>();

const isLogin = computed(() => userStore.isLogin);

const isFirstUse = computed(() => appStore.isFirstUse);

const showGuide = computed(() => appStore.showGuide);

// 第一次使用 在未展示协议的情况下 展示弹窗
const showConfirm = computed(() => isFirstUse.value && !showProtocol.value);

const protocolTitle = computed(() => {
  return protocol.value?.getProtocolTitle(protocolType) || "";
});

watch(
  showGuide,
  (n) => {
    // 不是第一次使用 则跳转到首页
    if (!n) {
      uni.switchTab({ url: "/pages/index/index" });
    }
  },
  {
    immediate: true,
  },
);

const onConfirm = () => {
  appStore.changeIsFirstUse(false);
};

const onCancel = () => {
  exitMiniProgram();
};

const openProtocol = () => {
  protocol.value?.showProtocol(true);
};
</script>

<style lang="scss" scoped>
.box {
  padding-top: var(--status-bar-height);
}
</style>
